<template>
	<view class="page">
		<template v-if="isLogin">
			<view class="body">
				<view class="form-wrap m-b2">
					<!-- <view class="form-item">
						<view class="label">培训区域：</view>
						<view class="form-input">
							<view class="content" @click="selectArea">
								<input type="text" class="inp" disabled v-model="params.area" placeholder="选择培训区域" />
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">关键词：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params.keywords" placeholder="输入关键词" /> 
							</view>
						</view>
					</view> -->
					<view class="form-item">
						<view class="label">培训名称：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params.px_name" placeholder="输入培训名称" />
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">省 份：</view>
						<picker mode="selector" :range="provinces" range-key="name" class="form-picker" @change="changeProvince">
							<view class="picker">
								<input type="text" v-model="params.province.name" disabled class="select-data t-l" placeholder="请选择省份">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					<view v-if="params.province.name" class="form-item">
						<view class="label">城 市：</view>
						<picker mode="selector" :range="citys" range-key="name" class="form-picker" @change="changeCity">
							<view class="picker">
								<input type="text" v-model="params.city.name" disabled class="select-data t-l" placeholder="请选择城市">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					<view v-if="params.city.name" class="form-item">
						<view class="label">区/县：</view>
						<picker mode="selector" :range="districts" range-key="name" class="form-picker" @change="changeDistrict">
							<view class="picker">
								<input type="text" v-model="params.district.name" disabled class="select-data t-l" placeholder="请选择区/县">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					<view v-if="params.district.name" class="form-item">
						<view class="label">镇/街道：</view>
						<picker class="form-picker" :range="towns" range-key="name" mode="selector" @change="changeTown">
							<view class="picker">
								<input type="text" v-model="params.town.name" disabled class="select-data t-l" placeholder="请选择镇/街道">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					<view v-if="params.town.name" class="form-item">
						<view class="label">村/社区：</view>
						<picker class="form-picker" :range="villages" range-key="name" mode="selector" @change="changeVillage">
							<view class="picker">
								<input type="text" v-model="params.village.name" disabled class="select-data t-l" placeholder="选择村/社区">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					 
					<view class="form-item">
						<view class="label">开始日期：</view>
						<picker class="form-picker" mode="date" @change="changeDate" data-type="start">
							<view class="picker">
								<input type="text" disabled v-model="params.beginTime" class="select-data t-l" placeholder="选择开始日期">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					<view class="form-item">
						<view class="label">结束日期：</view>
						<picker mode="date" class="form-picker" @change="changeDate" data-type="end">
							<view class="picker">
								<input type="text" disabled v-model="params.endTime" class="select-data t-l" placeholder="选择结束日期">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="form-lay-btn" data-id="areaSearchinfo" @click="search">查 询</view>
				</view>
			</view>
			
			<view v-if="flag.isFullPage" class="full-fix-page">
				<template v-if="flag.isShowSelectArea">
					<selectArea @cancle="closeSelectArea" @confirm="confirmArea" :selectData="selectAreaData"></selectArea>	
				</template>							 
			</view>
		</template>
	</view>
</template>

<script>
	import selectArea from '@/components/selectArea.vue'
	export default {
		name: 'demo',
		data() {
			return {
				isLogin: false,
				userInfo: uni.getStorageSync('userInfo'), 
				selectAreaData:{},
				provinces:[],
				citys:[],
				districts:[],
				towns:[],
				villages:[],
				params: {	
					province: {},
					city: {},
					district: {},
					town: {},
					village: {},
					keywords:'', 
					beginTime: '',
					endTime: '',
					area:'',
				}, 
				flag:{
					isFullPage:false,
					isShowSelectArea:false
				},
				catch_search_data:uni.getStorageSync('pxSearch')
			}
		},
		onShow() {

		},
		async onLoad() { 
			this.isLogin = await this.$loginState('check');
			if(this.isLogin){
				this.provinces=await this.getArea('china','china');  
				if(this.catch_search_data){
					this.params=this.catch_search_data;
					this.citys=await this.getArea(this.catch_search_data.province.level,this.catch_search_data.province.adcode);
					this.districts=await this.getArea(this.catch_search_data.city.level,this.catch_search_data.city.adcode);
					this.towns=await this.getArea('town',this.catch_search_data.district.adcode);
					this.villages=await this.getArea('village',this.catch_search_data.town.adcode);
				}
				
				
			}
		},
		methods: {
			// 获取省份列表
			getArea:async function(areaName,adcode){ 
				let res={}; 
				if (areaName == 'town' || areaName == 'village') {
					res=await this.$api.ydc_api.getStreet({
						areaName: areaName,
						adcode: adcode
					}) 
					 
				}else {
					res=await this.$api.ydc_api.getProvince({
						areaName: areaName,
						adcode: adcode
					})  
				} 
				
				if(res.data.ret==0){ 
					return res.data.data;
				}
			},
			
			// 选择省份
			changeProvince:async function(e){ 
				let idx=e.detail.value; 
				let data=this.provinces[idx];
				this.params.province=data;  
				this.params.city.name='';
				this.params.district.name='';
				this.params.town.name='';
				this.params.village.name='';
				this.params.city.adcode='';
				this.params.district.adcode='';
				this.params.town.adcode='';
				this.params.village.adcode='';
				this.citys=[];
				this.districts=[];
				this.towns=[];
				this.villages=[];
				this.citys=await this.getArea(data.level,data.adcode); 
			},
			
			// 选择城市
			changeCity:async function(e){
				let idx=e.detail.value;
				let data=this.citys[idx];
				this.params.city=data;	 
				this.params.district.name='';
				this.params.town.name='';
				this.params.village.name='';
				this.params.district.adcode='';
				this.params.town.adcode='';
				this.params.village.adcode='';
				this.districts=[];
				this.towns=[];
				this.villages=[];
				this.districts=await this.getArea(data.level,data.adcode) 
			},
			
			// 选择区
			changeDistrict:async function(e){
				let idx=e.detail.value;
				let data=this.districts[idx];
				this.params.district=data; 
				this.params.town.name='';
				this.params.village.name='';
				this.params.town.adcode='';
				this.params.village.adcode='';
				this.towns=[];
				this.villages=[];
				this.towns=await this.getArea('town',data.adcode) 
			},
			
			// 选择镇/街道
			changeTown:async function(e){
				let idx=e.detail.value;
				let data=this.towns[idx];
				this.params.town=data;
				this.params.village.adcode='';
				this.params.village.name=''; 
				this.villages=await this.getArea('village',data.adcode); 
			},
			
			// 选择村/社区
			changeVillage:async function(e){
				let idx=e.detail.value;
				let data=this.villages[idx];
				this.params.village=data; 
			},
			
			// 选择地区
			selectArea:function(){
				this.flag.isFullPage=true;
				this.flag.isShowSelectArea=true; 	
			},
			
			// 关闭地区选择
			closeSelectArea:function(){
				this.flag.isFullPage=false;
				this.flag.isShowSelectArea=false; 				
			},
			
			// 确定选择区域
			confirmArea:function(data){  
				console.log(data)
				this.selectAreaData=data; 
				this.params.area='';
				for(let i in this.selectAreaData){		
					if(this.selectAreaData[i].show){
						this.params.area+=this.selectAreaData[i].name;
					} 			
				} 
				this.closeSelectArea();
			},
			  
		 
			// 选择时间
			changeDate:function(e){
				let type=e.currentTarget.dataset.type;
				if(type=='start'){
					this.params.beginTime=e.detail.value;
				}else if(type=='end'){
					this.params.endTime=e.detail.value;
				} 
			},
			
			// 查询
			search: function () {   
				if (this.params.beginTime=='') {
					uni.showToast({
						icon:'none',
						title: '请选择开始日期', 
						mask:true
					})
					return;
				} 
				if (this.params.endTime=='') {
					uni.showToast({
						icon:'none',
						title: '请选择结束日期', 
						mask:true
					})
					return;
				} 
			    let data = { 
					province: this.params.province.adcode,
					city: this.params.city.adcode,
					district: this.params.district.adcode,
					town: this.params.town.adcode,
					village: this.params.village.adcode,
					keyword: this.params.area+this.params.keywords,
					beginTime: this.params.beginTime,
					endTime: this.params.endTime
			    }    
				uni.setStorage({
					key:'pxSearch',
					data:this.params
				}) 
				uni.navigateTo({
					url:'/package_yunpeixun/search-result/search-result?params='+JSON.stringify(data)
				})
			  },

		},
		computed: {

		},
		components: {
			selectArea
		}
	}
</script>

<style lang="less">
	.data-wrap {
		width: 96%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 10rpx;
		overflow: auto;

		.hd {
			padding: 15rpx 20rpx;
			border-bottom: 1rpx solid #ddd;

			text {
				padding-left: 30rpx;
				border-left: 10rpx solid #f00;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	.category-list {
		margin: 40rpx 0 10rpx;
	}

	.data-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 94%;
		margin: 0 auto 20rpx;
		border-top: 1rpx dashed #ddd;

		.item {
			width: 22%;
			margin-top: 30rpx;
			font-size: 28rpx;
			text-align: center;

			.label {
				height: 90rpx;
				color: #999;
			}
		}
	}
</style>
